<template>
    <create-modal
        :modal="modal"
        @ok="
            () => {
                $emit('ok')
            }
        "
        @cancel="
            () => {
                $emit('cancel')
            }
        "
    >
        <a-form :form="form" v-bind="formLayout" :colon="colon">
            <a-row>
                <a-col :span="modelSpan" v-for="(item, index) in modelOptions" :key="index" class="mb16">
                    <a-form-item :label="item.title">
                        <a-select
                            :mode="item.mode"
                            :maxTagCount="item.maxTagCount"
                            allowClear
                            v-if="item.type === 'select'"
                            v-decorator="[item.dataIndex, { rules: item.rules }]"
                            :disabled="item.disabled"
                            :placeholder="item.placeholder"
                            :loading="item.loading"
                            @popupScroll="popupScroll($event, item)"
                        >
                            <a-select-option
                                v-for="(option, optionIndex) in item.options"
                                :value="option.value"
                                :key="option.label + optionIndex"
                            >
                                {{ option.label }}
                            </a-select-option>
                        </a-select>
                        <a-cascader
                            allowClear
                            changeOnSelect
                            v-else-if="item.type === 'cascader'"
                            v-decorator="[item.dataIndex, { rules: item.rules }]"
                            :disabled="item.disabled"
                            :placeholder="item.placeholder"
                            :options="item.options"
                        />
                        <a-checkbox-group
                            v-else-if="item.type === 'checkboxGroup'"
                            v-decorator="[item.dataIndex, { rules: item.rules }]"
                            :disabled="item.disabled"
                            :options="item.options"
                        />

                        <template v-else-if="item.type === 'textarea'">
                            <a-textarea
                                allowClear
                                v-decorator="[item.dataIndex, { rules: item.rules }]"
                                :disabled="item.disabled"
                                :placeholder="item.placeholder"
                                :auto-size="{ minRows: 3, maxRows: 5 }"
                            ></a-textarea>
                        </template>
                        <a-input-password
                            v-else-if="item.type === 'password'"
                            :autoComplete="item.autoComplete || 'on'"
                            v-decorator="[item.dataIndex, { rules: item.rules }]"
                            :disabled="item.disabled"
                            :placeholder="item.placeholder"
                        />
                        <a-input-number
                            v-else-if="item.type === 'number'"
                            :disabled="item.disabled"
                            :placeholder="item.placeholder"
                            :min="item.min"
                            :max="item.max"
                            v-decorator="[item.dataIndex, { rules: item.rules }]"
                            :formatter="item.formatter"
                            :parser="item.parser"
                        />
                        <a-input
                            allowClear
                            v-else
                            v-decorator="[item.dataIndex, { rules: item.rules }]"
                            :autoComplete="item.autoComplete || 'on'"
                            :disabled="item.disabled"
                            :placeholder="item.placeholder"
                        />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <slot></slot>
    </create-modal>
</template>

<script>
import CreateModal from './create-modal'
import { pick } from 'lodash'

export default {
    name: 'create-form',
    components: { CreateModal },
    props: {
        name: String,
        modal: Object,
        formLayout: {
            type: Object,
            default: () => {
                return {
                    labelCol: {
                        md: { span: 6 },
                        sm: { span: 5 },
                    },
                    wrapperCol: {
                        md: { span: 16 },
                        sm: { span: 13 },
                    },
                }
            },
        },
        model: {
            type: Object,
            default: () => null,
        },
        modelSpan: {
            type: Number,
            default: 12,
        },
        methods: {
            type: Object,
        },
        modelOptions: Array,
        colon: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
    data() {
        return {
            form: this.$form.createForm(this, { name: this.name }),
        }
    },
    created() {
        let fields = this.modelOptions.map(item => item.dataIndex)
        fields.forEach(v => this.form.getFieldDecorator(v))
        // 当 model 发生改变时，为表单设置值
        this.model && this.form.setFieldsValue(pick(this.model, fields))
        this.$watch('model', () => {
            setTimeout(() => {
                this.model && this.form.setFieldsValue(pick(this.model, fields))
            }, 100)
        })
    },
    methods: {
        popupScroll(e, item) {
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop
            const clientHeight = target.clientHeight
            // 滚动条触底
            if (scrollHeight < clientHeight + 5) {
                if (item.popupScroll) {
                    this.$emit('selectScroll', item.dataIndex)
                }
            }
        },
    },
}
</script>

<style scoped></style>
